<script setup>
import {ref} from "vue";

const students = ref(
    [{id: 1, name: 'zhangsan', age: 1, score: 10},
      {id: 2, name: 'lisi', age: 1, score: 70},
      {id: 3, name: 'wangwu', age: 1, score: 20},
      {id: 4, name: 'zhaoliu', age: 1, score: 80}])
</script>

<template>
  <h1>......</h1>
  <table border="1px">
    <tr>
      <th>id</th>
      <th>name</th>
      <th>age</th>
      <th>score</th>
    </tr>
<!--    template和我们的div一样-->
<!--    template组织我们的html结构-->
<!--    template不会被解析，也不会占用任何的位置只是用来做结构处理-->
    <template v-for="student in students" :key="student.id">
      <tr v-if="student.score >= 60">
        <td>{{ student.id }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.score }}</td>
      </tr>
    </template>
  </table>
</template>


<style scoped>

</style>
